<template>
  <van-overlay :show="show" @click="maskClick">
    <div class="wrapper">
      <div class="round-card">
        <img
          @click.stop
          class="mid-img mar-auto round"
          src="@/assets/static/milk-main.png"
          alt=""
        />
        <div class="row-item position-top">
          <p class="tips" v-text="msg"></p>
          <van-loading v-if="spinner" color="#f39c12" />
        </div>
      </div>
    </div>
  </van-overlay>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "Loading",
  props: {
    isLoad: {
      type: Boolean,
      default: false,
    },
    loader: {
      type: Boolean,
      default: true,
    },
    msg: {
      type: String,
      default: "加载中",
    },
    canClose: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      show: this.isLoad,
      spinner: this.loader,
    };
  },
  watch: {
    isLoad: {
      handler(newVal, oldVal) {
        this.show = newVal;
      },
    },
  },
  methods: {
    //外界调用的方法
    showLoading() {
      this.show = true;
    },
    hideLoading() {
      this.show = false;
    },
    // 蒙版点击
    maskClick() {
      //   this.show = this.canClose ? false : true;
      this.canClose && this.CHANGE_TipFLAG(false);
    },
    ...mapMutations("ShopCenter", ["CHANGE_TipFLAG"]),
  },
};
</script>

<style scoped>
.wrapper {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.round-card {
  width: auto;
  height: 21.875rem;
  box-sizing: border-box;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.round {
  border-radius: 1rem;
}
.tips {
  font-family: "TakeCo";
  text-align: center;
  font-weight: 500;
}
.position-top {
  position: absolute;
  bottom: 3.75rem;
}
</style>